<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >测试详情</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell-group>
          <van-cell>
            <template slot="title">
              <span class="custom-title">第{{ itemIndex }}题-分值:{{ item.score }}分</span>
            </template>
          </van-cell>
          <van-cell>
            <template slot="title">
              <span class="custom-title">{{ item.heading }}</span>
            </template>
          </van-cell>
          <van-cell>
            <span class="custom-value">
              <p>{{ item.description }}</p></span
            >
          </van-cell>
          <van-cell>
            <van-checkbox-group v-model="item.answer_list">
              <van-checkbox
                @click="changeSort(item.answer_list)"
                name="1"
                checked-color="#07c160"
                icon-size="24px"
                style="margin-top: 20px"
                >A. {{ item.select1 }}</van-checkbox
              >
              <van-checkbox
                @click="changeSort(item.answer_list)"
                name="2"
                checked-color="#07c160"
                icon-size="24px"
                style="margin-top: 20px"
                >B. {{ item.select2 }}</van-checkbox
              >
              <van-checkbox
                @click="changeSort(item.answer_list)"
                name="3"
                checked-color="#07c160"
                icon-size="24px"
                style="margin-top: 20px"
                >C. {{ item.select3 }}</van-checkbox
              >
              <van-checkbox
                @click="changeSort(item.answer_list)"
                name="4"
                checked-color="#07c160"
                icon-size="24px"
                style="margin-top: 20px"
                >D. {{ item.select4 }}</van-checkbox
              >
            </van-checkbox-group>
          </van-cell>
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row style="margin-top: 20px">
      <van-col span="8" style="text-align: center">
        <van-button
          plain
          hairline
          type="primary"
          size="normal"
          style="font-weight: bold"
          @click="previousQuestion"
          >上一题</van-button
        >
      </van-col>
      <van-col span="8" style="text-align: center; vertical-align: middle">
        <p>{{ itemIndex }}/{{ itemList.length }}</p>
      </van-col>
      <van-col span="8" style="text-align: center">
        <van-button
          plain
          type="primary"
          size="normal"
          style="font-weight: bold"
          @click="nextQuestion"
          >{{ nextText }}</van-button
        >
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24" style="min-height: 24px"> </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Api } from "../../../api/api_config";

export default {
  data() {
    return {
      active: "1",
      work: {},
      itemList: [],
      item: {},
      itemIndex: 1,
      nextText: "下一题",
      endFlag: 0
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false;
      // 获取work对象
      this.work = this.$store.state.work;
      
      // 拆解right字段
      // this.work.source.participants[0].requestItems.forEach(e => {
      //   e.right_list = e.right.split(',')
      // }) 
      this.itemList = this.work.source.participants[0].requestItems;
      this.item = this.itemList[this.itemIndex - 1];
      if (this.itemList.length === 1) {
        this.endFlag = 1;
        this.nextText = "提交试卷";
      }
    },
    back() {
      this.$store.state.tab_show = true;
      this.$router.push("/work");
    },
    previousQuestion() {
      this.nextText = "下一题";
      this.endFlag = 0;
      this.itemIndex--;
      if (this.itemIndex < 1) {
        this.itemIndex++;
        return;
      }
      this.item = this.itemList[this.itemIndex - 1];
    },
    nextQuestion() {
      this.itemIndex++;
      if (this.itemList.length < this.itemIndex) {
        this.itemIndex--;
        if (this.endFlag === 1) {
          this.commitExam();
        }
      } else if (this.itemList.length === this.itemIndex) {
        this.endFlag = 1;
        this.nextText = "提交试卷";
        this.item = this.itemList[this.itemIndex - 1];
      } else {
        this.item = this.itemList[this.itemIndex - 1];
      }
    },
    commitExam() {
      // 拼接anwser与判分
      let totalScore = 0

      this.work.source.participants[0].requestItems.forEach((element) => {
        // console.log(element.answer_list);
        element.answer = ""

        if (element.answer_list !== undefined) {
          for (let i = 0; i < element.answer_list.length; i++) {
            const ele = element.answer_list[i]
            if (i === element.answer_list.length - 1) {
              element.answer += ele
            } else {
              element.answer += ele + ","
            }
            
          }
        }
        if (element.answer === element.right) {
          totalScore += element.score
        }
      })

      // 生成result对象
      let result = {
        id : this.work.id,
        userid: this.$store.state.configuration.currentUser.id,
        jobScore: totalScore,
        jobResult: this.work.source.participants[0].jobResult,
        memo: this.work.source.participants[0].memo,
        requestItems: this.itemList
      }

      let that = this;

      this.$axios({
            method: Api.exam.complete.method,
            url: Api.exam.complete.url,
            data: result
          })
        .then(function () {
          Toast.success('提交成功')
          that.back()
          // console.log(response)
        })
        .catch(function (error) {
          console.log(error);
        });

    },
    changeSort(arr) {
      let newArr = arr.sort(function(a,b){return a.localeCompare(b)})
      arr = newArr
      // console.log(arr)
    }
  },
};
</script>

<style scoped>
.custom-title {
  font-size: 18px;
  margin-left: 20px;
}

.custom-value {
  font-size: 16px;
}
</style>
